<!--suppress ALL-->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>商品结算</title>

    <!-- Favicons -->
    <link rel="shortcut icon" th:href="@{/assets/images/favicon.ico}">
    <link rel="stylesheet" th:href="@{/assets/css/vendor/vendor.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/plugins/plugins.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/style.min.css}">
    <script th:src="@{/assets/js/jquery-3.2.1.slim.min.js}"></script>


</head>

<body>
    <!-- Header Section Start -->
    <div class="header section" th:replace="~{common/head::head}"></div>
    <!-- Header Section End -->

    <!-- Breadcrumb Area Start -->
    <div class="section breadcrumb-area bg-name-bright">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <div class="breadcrumb-wrapper">
                        <h2 class="breadcrumb-title">商品结算</h2>
                        <ul>
                            <li><a href="#">Home</a></li>
                            <li>Checkout</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Breadcrumb Area End -->

    <!-- Checkout Section Start -->
    <div class="section section-margin">
        <div class="container">

            <div class="row m-b-n20">
                <div class="col-lg-4 col-12 m-b-20">

                    <!-- Checkbox Form Start -->
                    <form id="orderForm" th:action="@{/orderItem/add}" method="post">
                        <div class="checkbox-form">
                            <!-- Checkbox Form Title Start -->
                            <h3 class="title">收货地址</h3>
                            <!-- Checkbox Form Title End -->

                            <div class="row">


                                <!-- First Name Input Start -->
                                <div class="col-md-6">
                                    <div class="checkout-form-list">
                                        <label>收件人 <span>*</span></label>
                                        <input id="receiverName" name="receiverName" onblur="validate_name(this.value)" type="text" >
                                        <span id="test_name"></span>
                                    </div>
                                </div>
                                <!-- First Name Input End -->

                                <!-- Last Name Input Start -->
                                <div class="col-md-6">
                                    <div class="checkout-form-list">
                                        <label>手机号 <span class="required">*</span></label>
                                        <input id="receiverPhone" name="receiverPhone" onblur="validate_phone(this.value)" type="text">
                                        <span id="test_phone"></span>
                                    </div>
                                </div>
                                <!-- Last Name Input End -->

                                <!-- Company Name Input Start -->
                                <div class="col-md-12">
                                    <div class="checkout-form-list">
                                        <label>省份-城市-区/县 <span class="required">*</span></label>
                                        <input id="area" name="area" placeholder="请输入正确的收件人所在区域" onblur="validate_area(this.value)" type="text">
                                        <span id="test_area"></span>
                                    </div>
                                </div>
                                <!-- Company Name Input End -->

                                <!-- Address Input Start -->
                                <div class="col-md-12">
                                    <div class="checkout-form-list">
                                        <label>详细地址 <span class="required">*</span></label>
                                        <input id="itemAddress" name="itemAddress" placeholder="请输入详细地址，如街道，小区等..." onblur="validate_address(this.value)" type="text">
                                        <span id="test_address"></span>
                                    </div>
                                </div>
                                <!-- Address Input End -->

                                <!-- Town or City Name Input Start -->
                                <div class="col-md-12">
                                    <div class="checkout-form-list">
                                        <label>邮箱 </label>
                                        <input id="receiverEmail" name="receiverEmail" placeholder="xxx@123.com" onblur="validate_email(this.value)" type="text">
                                        <span id="test_email"></span>
                                    </div>
                                </div>
                                <!-- Town or City Name Input End -->
                            </div>
                        </div>
                        <input type="hidden" name="cartIds" id="cartIds">
                    </form>
                    <!-- Checkbox Form End -->

                </div>

                <div class="col-lg-8 col-12 m-b-20">

                    <!-- Your Order Area Start -->
                    <div class="your-order-area border">

                        <!-- Title Start -->
                        <h3 class="title">您的订单</h3>
                        <!-- Title End -->

                        <!-- Your Order Table Start -->
                        <div  >
                            <table class="table">

                                <!-- Table Head Start -->
                                <thead>
                                    <tr class="cart-product-head">
                                        <th >商品</th>
                                        <th >数量</th>
                                        <th >封面</th>
                                        <th class="text-end">价格</th>
                                    </tr>
                                </thead>
                                <!-- Table Head End -->

                                <!-- Table Body Start -->
                                <tbody>
                                    <tr class="cart_item" th:each="cart : ${cartList}">
                                        <td class="cart-product" th:text="${cart.goodsName}"> </td>
                                        <td ><strong class="product-quantity" th:text="${cart.buyCount}"></strong><span>个 </span></td>
                                        <td ><img th:src="'http://localhost:8080/uploadFile/product/'+${cart.cover}" style="width: 50px;height: 50px"></img></td>
                                        <td class="cart-total text-end pe-0"><span>¥ </span><span class="amount" th:text="${cart.allPrice}"></span></td>
                                    </tr>
                                </tbody>
                                <!-- Table Body End -->

                                <!-- Table Footer Start -->
                                <tfoot>
                                    <tr class="cart-subtotal">
                                        <th class="text-start ps-0" colspan="3">购物车小计</th>
                                        <td class="text-end pe-0"><span>¥ </span><span class="cartamount" th:text="${total}"></span></td>
                                    </tr>
                                    <tr class="order-total">
                                        <th class="text-start ps-0" colspan="3">订单总价</th>
                                        <td class="text-end pe-0"><span>¥ </span><strong><span class="orderamount" th:text="${total}"></span></strong></td>
                                    </tr>
                                </tfoot>
                                <!-- Table Footer End -->

                            </table>
                        </div>
                        <!-- Your Order Table End -->

                        <!-- Payment Accordion Order Button Start -->
                        <div class="payment-accordion-order-button">
                            <div class="payment-accordion">
                                <div class="single-payment">
                                    <h5 class="panel-title m-b-15">
                                        <a class="collapse-off" data-bs-toggle="collapse" href="#collapseExample-3" aria-expanded="false" aria-controls="collapseExample-3">
                                            支付宝.
                                        </a>
                                    </h5>
                                    <div class="collapse" id="collapseExample-3">
                                        <div class="card card-body rounded-0">
                                            <p>使用支付宝下单，方便、安全、快捷！</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                                <button type="button" onclick="placeOrder()" class="btn btn-danger btn-hover-dark rounded-0 w-100" style="margin-top: 50px">立刻下单</button>
                        </div>
                        <!-- Payment Accordion Order Button End -->
                    </div>
                    <!-- Your Order Area End -->
                </div>
            </div>
        </div>
    </div>
    <!-- Checkout Section End -->

    <!-- Footer Section Start -->
    <footer class="section footer-section" th:replace="~{common/foot::foot}"></footer>
    <!-- Footer Section End -->


    <script th:src="@{/assets/js/vendor.min.js}"></script>
    <script th:src="@{/assets/js/plugins.min.js}"></script>

    <!--Main JS-->
    <script th:src="@{/assets/js/main.js}"></script>

    <input type="hidden" name="ids" id="ids" th:value="${cartIds}">
</body>

    <script>
        //验证收件人
        function validate_name(rname){
            if(rname !="") {
                document.getElementById("test_name").innerHTML = "<font color='green' size='3px'>√格式正确</font>";
            }else{
                document.getElementById("test_name").innerHTML = "<font color='red' size='3px'>收件人不能为空</font>";
            }
        }
        //验证地区
        function validate_area(rarea){
            if(rarea !="") {
                document.getElementById("test_area").innerHTML = "<font color='green' size='3px'>√格式正确</font>";
            }else{
                document.getElementById("test_area").innerHTML = "<font color='red' size='3px'>地区不能为空</font>";
            }
        }
        //验证详细地址
        function validate_address(raddress){
            if(raddress !="") {
                document.getElementById("test_address").innerHTML = "<font color='green' size='3px'>√格式正确</font>";
            }else{
                document.getElementById("test_address").innerHTML = "<font color='red' size='3px'>详细地址不能为空</font>";
            }
        }
        //验证邮箱
        function validate_email(email){
            //定义正则表达式的变量:邮箱正则
            var emailReg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            //console.log(rname);
            if(email !="" && email.search(emailReg) != -1) {
                document.getElementById("test_email").innerHTML = "<font color='green' size='3px'>√邮箱格式正确</font>";
            }else{
                document.getElementById("test_email").innerHTML = "<font color='red' size='3px'>邮箱格式错误</font>";
            }
        }
        //验证手机号
        function validate_phone(rphone){
            //^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6-10}$
            //测试密码：12345y
            var phoneReg=/^(13[0-9]|15[0-9]|17[0-9]|18[0-9]|14[0-9])[0-9]{8}$/;
            if(rphone != "" && rphone.search(phoneReg) != -1)
            {
                document.getElementById("test_phone").innerHTML = "<font color='green' size='3px'>√号码格式正确</font>";
            }else{
                document.getElementById("test_phone").innerHTML = "<font color='red' size='3px'>号码格式错误</font>";
                // alert("密码有6位，由数字和字母组成!");
            }
        }



        //结算
        function placeOrder(){
            var rname= $("#receiverName").val();
            var rphone=$("#receiverPhone").val();
            var rarea=$("#area").val();
            var raddress=$("#itemAddress").val();
            var remail=$("#receiverEmail").val();

            //这三个，如果任何一个有问题，都返回false
            var emailReg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            var phoneReg=/^(13[0-9]|15[0-9]|17[0-9]|18[0-9]|14[0-9])[0-9]{8}$/;

            if(remail != "" && emailReg.test(remail)){
                if(rphone !="" && phoneReg.test(rphone)){
                    if(rname != "" &&rarea != ""&&raddress != ""){
                        alert("信息填写正确，可以正常提交！");
                        $("#cartIds").val($("#ids").val());
                        //提交表单
                        $("#orderForm").submit();
                        return true;
                    }else{
                        return false;
                    }
                }else{
                    return false;
                }
            }else{
                return false;
            }

        }
    </script>
</html>